<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card v-loading="loading">
          <div slot="header"><span>题库分组统计试题数</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="basicCharts" style="height: 300px" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card v-loading="loading">
          <div slot="header"><span>难易程度分组统计试题数</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="difficultyCharts" style="height: 300px" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card v-loading="loading">
          <div slot="header"><span>题目类型分组统计试题数</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="topicTypeCharts" style="height: 300px" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import { getReposChart } from "@/api/juan/juanQuestionRepos";

export default {
  name: "juanReposStatistics",
  data() {
    return {
      basicCharts: null,
      difficultyCharts: null,
      topicTypeCharts: null,
      loading: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查缓存询信息 */
    getList() {
      this.loading = true;
      getReposChart()
        .then((res) => {
          let listData = res.data;
          let basicXdata = [],
            basicYdata = [];

          let difficultyMap = {};
          let topicTypeMap = {};

          let difficultyLegendData = [];
          let topicTypeLegendData = [];
          for (let i = 0; i < listData.length; i++) {
            const item = listData[i];

            basicXdata.push(item.name);
            basicYdata.push(item.count);

            for (let j = 0; j < item.difficultyChildren.length; j++) {
              const cItem = item.difficultyChildren[j];
              if (cItem.value in difficultyMap) {
                difficultyMap[cItem.value].data.push(cItem.count);
              } else {
                difficultyMap[cItem.value] = {
                  name: cItem.label,
                  // label: {
                  //   show: true,
                  //   formatter: "{a}({c})",
                  //   // rotate: 90,
                  // },
                  data: [cItem.count],
                  type: "bar",
                  barMaxWidth: 50,
                };
                difficultyLegendData.push(cItem.label);
              }
            }
            for (let j = 0; j < item.topicTypeChildren.length; j++) {
              const cItem = item.topicTypeChildren[j];
              if (cItem.value in topicTypeMap) {
                topicTypeMap[cItem.value].data.push(cItem.count);
              } else {
                topicTypeMap[cItem.value] = {
                  name: cItem.label,
                  // label: {
                  //   show: true,
                  //   formatter: "{a}({c})",
                  //   // rotate: 90,
                  // },
                  data: [cItem.count],
                  type: "bar",
                  barMaxWidth: 50,
                };
                topicTypeLegendData.push(cItem.label);
              }
            }
          }
          let difficultySeries = [];
          let topicTypeSeries = [];
          for (const key in difficultyMap) {
            if (difficultyMap.hasOwnProperty.call(difficultyMap, key)) {
              difficultySeries.push(difficultyMap[key]);
            }
          }
          for (const key in topicTypeMap) {
            if (topicTypeMap.hasOwnProperty.call(topicTypeMap, key)) {
              topicTypeSeries.push(topicTypeMap[key]);
            }
          }

          this.basicCharts = echarts.init(this.$refs.basicCharts);
          this.basicCharts.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            grid: {
              top: "10%",
              left: "3%",
              right: "6%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              axisTick: { show: false },
              data: basicXdata,
              name: "题库",
            },
            yAxis: {
              type: "value",
              name: "数量",
            },
            series: [
              {
                data: basicYdata,
                type: "bar",
                barMaxWidth: 50,
              },
            ],
          });

          this.difficultyCharts = echarts.init(this.$refs.difficultyCharts);
          this.difficultyCharts.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            grid: {
              top: "12%",
              left: "3%",
              right: "6%",
              bottom: "3%",
              containLabel: true,
            },
            legend: {
              data: difficultyLegendData,
            },
            xAxis: {
              type: "category",
              data: basicXdata,
              name: "题库",
            },
            yAxis: {
              type: "value",
              name: "数量",
            },
            series: difficultySeries,
          });

          this.topicTypeCharts = echarts.init(this.$refs.topicTypeCharts);
          this.topicTypeCharts.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            grid: {
              top: "12%",
              left: "3%",
              right: "6%",
              bottom: "3%",
              containLabel: true,
            },
            legend: {
              data: topicTypeLegendData,
            },
            xAxis: {
              type: "category",
              data: basicXdata,
              name: "题库",
            },
            yAxis: {
              type: "value",
              name: "数量",
            },
            series: topicTypeSeries,
          });

          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>
